<template>
  <el-upload
        class="uploader"
        ref="{$Field}upload"
        :action="{$filetype}Action"
        :show-file-list="true"
        :headers="headers"
        multiple
        :limit="{$count}"
        :on-exceed="{$handleFieldExceed}"
        :on-success="{$handleFieldSuccess}"
        :on-remove="{$handleFieldRemove}"
        :before-upload="{$beforeFieldUpload}"
        :file-list="{$Field}fileList"
        :auto-upload="false">
     <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
     <el-button style="margin-left: 10px;" size="small" type="success" el-event-at_click="{$submitFieldUpload}">上传到服务器</el-button>
     <div slot="tip" class="el-upload__tip">{$uploadtip}</div>
  </el-upload>
</template>
<script>
import { getToken } from '@/utils/auth';

  export default {
    data() {
      return {
        headers: {
          authorization: 'Bearer ' + getToken()
        },
        imageAction: process.env.VUE_APP_BASE_API + '/upload/image',
        fileAction: process.env.VUE_APP_BASE_API + '/upload/file',
        {$Field}fileList : []
      }
    },
    computed: {},
    watch: {
            formFieldsData: {
                handler(data) {
                    if (data.{$Field}) {
                         this.{$Field}fileList = JSON.parse(this.formFieldsData.{$Field});
                    }
                },
             deep: true
            }
    },
    mounted() {
    },
    methods: {
        init() {},
        {if $filetype == 'image'}
         {$beforeFieldUpload}(file) {
              const image = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg' || file.type === 'image/gif';
              if (!image) {
                this.$message.error('只支持 jpg/jpeg/png/gif 格式!')
              }
              let isLtSize = false;
              isLtSize = file.size / 1024 / 1024 < 5;
              if (!isLtSize) {
                this.$message.error('最大支持 5MB!')
              }
              return image && isLtSize
            },
        {elseif $filetype == 'file' /}
        {$beforeFieldUpload}(file) {
            const isPdf = file.type.indexOf('pdf') !== -1 || file.type.indexOf('ms-powerpoint') !== -1|| file.type.indexOf('officedocument.presentationml.presentation') !== -1;
            if (!isPdf) {
                this.$message.error('文件格式只支持 pdf/ppt 格式')
            }
            const isMax10M = file.size / 1024 / 1024 < 5;
            if (!isMax10M) {
                this.$message.error('文件格式最大支持 5MB!')
            }
            return isPdf && isMax10M
        },
        {/if}
         {$handleFieldSuccess}(response, file, fileList) {
              let filesData = [];
              fileList.forEach(function (item,index) {
                if(item.url){
                  filesData.push({'name':item.name,'url':item.url})
                }else if(response.data){
                  filesData.push({'name':item.name,'url':response.data })
                }
              });
              this.formFieldsData.{$Field} = JSON.stringify(filesData);
              this.{$Field}fileList = fileList
            },
        {$handleFieldExceed}(files, fileList) {
              this.$message.warning(`当前限制选择 {$count} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
        {$submitFieldUpload}() {
              this.$refs.{$Field}upload.submit();
            },
        {$handleFieldRemove}(file, fileList) {
              let filesData = [];
              fileList.forEach(function (item,index) {
                if(item.url){
                  filesData.push({'name':item.name,'url':item.url})
                }
              });
              this.formFieldsData.{$Field} = JSON.stringify(filesData);
            },
    },
  }
</script>